Veebi jõudlusliidesed (API-d): Ajastuse mõõtmine parema kasutajakogemuse nimel

Tänapäeva digitaalses maastikus ei ole kiire ja reageeriv veebisait enam luksus, vaid vajadus. Kasutajad ootavad sujuvat kogemust ja isegi väike viivitus võib põhjustada pettumust, hüljatud ostukorve ja lõpuks kaotatud tulu. Veebi jõudlusliidesed (Web Performance APIs) annavad arendajatele tööriistad veebisaidi jõudluse erinevate aspektide täpseks mõõtmiseks, võimaldades neil tuvastada kitsaskohti ja optimeerida kasutajakogemust (UX).

Kasutajakogemuse mõõdikute olulisuse mõistmine

Enne API-de tehnilistesse üksikasjadesse süvenemist on oluline mõista, miks UX-i mõõdikud on nii tähtsad. Need pakuvad kvantifitseeritavat viisi, kuidas hinnata, kuidas kasutajad tajuvad teie veebisaidi kiirust ja reageerimisvõimet. Kehv kasutajakogemus võib negatiivselt mõjutada:

• Põrkemäär (Bounce Rate): Aeglased laadimisajad põhjustavad sageli selle, et kasutajad lahkuvad teie veebisaidilt enne sisuga tutvumist.
• Konversioonimäärad: Pettumust valmistav kasutajakogemus võib heidutada potentsiaalseid kliente tehingute lõpuleviimisest.
• Otsingumootorite järjestus: Otsingumootorid nagu Google eelistavad hea jõudlusega veebisaite, mis mõjutab teie nähtavust otsingutulemustes. Core Web Vitals, mis toetuvad suuresti jõudlusliidestele, on järjestusfaktor.
• Brändi tajumine: Aeglane veebisait võib luua teie brändist negatiivse mulje, viidates tähelepanu puudumisele detailidele ja kehvale kasutajakogemusele.

Peamised veebi jõudlusliidesed ja mõõdikud

Saadaval on mitmeid veebi jõudlusliideseid, millest igaüks pakub unikaalseid teadmisi veebisaidi jõudluse eri aspektidest. Siin on mõned kõige olulisemad:

1. Navigation Timing API

Navigation Timing API pakub üksikasjalikku ajastusteavet dokumendi laadimise kohta. See võimaldab mõõta aega, mis kulub laadimisprotsessi erinevatele etappidele, näiteks:

• navigationStart: Ajatempel vahetult enne, kui brauser alustab dokumendi toomist.
• fetchStart: Ajatempel vahetult enne, kui brauser alustab dokumendi toomist võrgust.
• domainLookupStart: Ajatempel vahetult enne, kui brauser alustab dokumendi domeeni DNS-otsingut.
• domainLookupEnd: Ajatempel vahetult pärast seda, kui brauser lõpetab DNS-otsingu.
• connectStart: Ajatempel vahetult enne, kui brauser alustab ühenduse loomist serveriga.
• connectEnd: Ajatempel vahetult pärast seda, kui brauser lõpetab ühenduse loomise serveriga.
• requestStart: Ajatempel vahetult enne, kui brauser saadab dokumendi jaoks HTTP-päringu.
• responseStart: Ajatempel vahetult pärast seda, kui brauser saab HTTP-vastuse esimese baidi.
• responseEnd: Ajatempel vahetult pärast seda, kui brauser saab kogu HTTP-vastuse.
• domLoading: Ajatempel vahetult enne, kui brauser seab document.readyState väärtuseks "loading".
• domInteractive: Ajatempel vahetult pärast seda, kui brauser on HTML-dokumendi parsinud ja DOM on valmis.
• domContentLoadedEventStart: Ajatempel vahetult enne, kui brauser käivitab DOMContentLoaded sündmuse.
• domContentLoadedEventEnd: Ajatempel vahetult pärast seda, kui brauser on DOMContentLoaded sündmuse käivitanud.
• domComplete: Ajatempel vahetult pärast seda, kui brauser seab document.readyState väärtuseks "complete".
• loadEventStart: Ajatempel vahetult enne, kui brauser käivitab laadimissündmuse (load event).
• loadEventEnd: Ajatempel vahetult pärast seda, kui brauser on laadimissündmuse (load event) käivitanud.

Näide: DNS-i otsinguks kuluva aja arvutamine:

            const navigationTiming = performance.getEntriesByType("navigation")[0];
const dnsLookupTime = navigationTiming.domainLookupEnd - navigationTiming.domainLookupStart;
console.log(`DNS Lookup Time: ${dnsLookupTime} ms`);
            

              
                Copy
              
            
          

2. Resource Timing API

Resource Timing API pakub üksikasjalikku ajastusteavet veebilehe poolt laaditud üksikute ressursside, näiteks piltide, CSS-failide, JavaScripti failide ja fontide kohta. See API aitab teil tuvastada, milliste ressursside laadimine võtab kõige kauem aega, ja optimeerida nende edastamist.

Põhimõõdikud:

• name: Ressursi URL.
• startTime: Ajatempel, mil brauser alustab ressursi toomist.
• responseEnd: Ajatempel, mil brauser saab ressursi viimase baidi.
• duration: Ressursi laadimiseks kulunud koguaeg (responseEnd - startTime).
• transferSize: Üle võrgu edastatud ressursi suurus.
• encodedBodySize: Ressursi suurus enne tihendamist.
• decodedBodySize: Ressursi suurus pärast lahtipakkimist.

Näide: Suurima pildi tuvastamine lehel:

            const resourceTiming = performance.getEntriesByType("resource");

let largestImage = null;
let largestImageSize = 0;

resourceTiming.forEach(resource => {
  if (resource.initiatorType === "img" && resource.transferSize > largestImageSize) {
    largestImage = resource.name;
    largestImageSize = resource.transferSize;
  }
});

console.log(`Largest Image: ${largestImage}, Size: ${largestImageSize} bytes`);
            

              
                Copy
              
            
          

3. User Timing API

User Timing API võimaldab teil määratleda kohandatud jõudlusmõõdikuid ja mõõta aega, mis kulub konkreetsetele koodiplokkidele või kasutaja interaktsioonidele. See on eriti kasulik kriitiliste JavaScripti funktsioonide või keerukate kasutajaliidese komponentide jõudluse jälgimiseks.

Põhimeetodid:

• performance.mark(markName): Loob määratud nimega ajatempli.
• performance.measure(measureName, startMark, endMark): Loob jõudlusmõõtmise kahe märgi vahel.
• performance.getEntriesByType("measure"): Hangib kõik jõudlusmõõtmised.

Näide: Keeruka Reacti komponendi renderdamiseks kuluva aja mõõtmine:

            performance.mark("componentRenderStart");

// Code to render the React component
render(, document.getElementById("root"));

performance.mark("componentRenderEnd");
performance.measure("componentRenderTime", "componentRenderStart", "componentRenderEnd");

const renderTime = performance.getEntriesByName("componentRenderTime")[0].duration;
console.log(`Component Render Time: ${renderTime} ms`);
            

              
                Copy
              
            
          

4. Long Tasks API

Long Tasks API aitab teil tuvastada ülesandeid, mis blokeerivad põhilõime kauem kui 50 millisekundit. Need pikad ülesanded võivad põhjustada kasutajaliidese hangumist ja negatiivselt mõjutada kasutajakogemust. Nende ülesannete tuvastamise ja optimeerimisega saate parandada oma veebisaidi reageerimisvõimet.

Näide: Pikkade ülesannete logimine konsooli:

            const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log("Long Task:", entry);
  });
});

observer.observe({ type: "longtask", buffered: true });
            

              
                Copy
              
            
          

5. Paint Timing API

Paint Timing API pakub kahte põhimõõdikut, mis on seotud veebilehe visuaalse renderdamisega:

• First Paint (FP): Aeg, mil brauser renderdab ekraanile esimese piksli.
• First Contentful Paint (FCP): Aeg, mil brauser renderdab ekraanile esimese sisutüki (nt pilt, tekst).

Need mõõdikud on üliolulised, et mõista, kui kiiresti kasutajad tajuvad teie veebisaidilt esimest visuaalset tagasisidet.

Näide: FCP hankimine:

            const paintTiming = performance.getEntriesByType("paint");
const fcpEntry = paintTiming.find(entry => entry.name === "first-contentful-paint");

if (fcpEntry) {
  console.log(`First Contentful Paint: ${fcpEntry.startTime} ms`);
}
            

              
                Copy
              
            
          

6. Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) on Core Web Vital'i mõõdik, mis mõõdab aega, mis kulub suurima sisuelemendi (nt pilt, video, tekstiplokk) nähtavale ilmumiseks vaateaknas. Hea LCP skoor näitab, et lehe põhisisu laeb kiiresti, pakkudes paremat kasutajakogemust.

Mida LCP jaoks optimeerida:

• Optimeerige pilte: Kasutage sobivaid pildivorminguid (nt WebP), tihendage pilte ja kasutage reageerivaid pilte.
• Optimeerige CSS-i: Minifitseerige ja tihendage CSS-faile ning vältige renderdamist blokeerivat CSS-i.
• Optimeerige JavaScripti: Lükake edasi mittekriitiline JavaScript ja vältige pikalt kestvaid JavaScripti ülesandeid.
• Serveri vastuseajad: Veenduge, et teie server vastaks päringutele kiiresti.

7. Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) on teine Core Web Vital'i mõõdik, mis mõõdab veebilehe visuaalset stabiilsust. See kvantifitseerib laadimisprotsessi käigus toimuvate ootamatute paigutuse nihete hulka. Madal CLS skoor näitab, et leht on visuaalselt stabiilne, pakkudes meeldivamat kasutajakogemust.

Mis põhjustab paigutuse nihkeid:

• Mõõtmeteta pildid: Määrake alati piltidele laiuse ja kõrguse atribuudid.
• Reklaamid, manused ja iframe'id ilma reserveeritud ruumita: Reserveerige nende elementide jaoks ruumi, et vältida nende poolt põhjustatud paigutuse nihkeid.
• Dünaamiliselt sisestatud sisu: Olge sisu dünaamilisel sisestamisel ettevaatlik, kuna see võib põhjustada ootamatuid paigutuse nihkeid.
• Veebifondid, mis põhjustavad FOIT/FOUT-i: Optimeerige fontide laadimist, et minimeerida nähtamatu teksti vilkumise (FOIT) ja stiilimata teksti vilkumise (FOUT) mõju.

8. Interaction to Next Paint (INP)

Interaction to Next Paint (INP) on Core Web Vital'i mõõdik, mis mõõdab veebilehe reageerimisvõimet kasutaja interaktsioonidele. See hindab kõigi klikkide, puudutuste ja klaviatuuri interaktsioonide latentsust, mida kasutaja lehe külastuse ajal teeb. INP asendab First Input Delay (FID) Core Web Vital'i mõõdikuna alates 2024. aasta märtsist.

INP parandamine:

• Optimeerige JavaScripti täitmist: Jaotage pikad ülesanded väiksemateks asünkroonseteks osadeks, et vältida põhilõime blokeerimist.
• Lükake edasi mittekriitiline JavaScript: Laadige ainult esmaseks renderdamiseks vajalik JavaScript ja lükake ülejäänud edasi.
• Kasutage Web Workereid: Delegeerige arvutusmahukad ülesanded Web Workeritele, et vältida nende poolt põhilõime blokeerimist.
• Optimeerige sündmuste käsitlejaid: Veenduge, et sündmuste käsitlejad on tõhusad ja vältige tarbetute toimingute tegemist.

Praktilised näited ja koodilõigud

Siin on mõned praktilised näited, kuidas kasutada veebi jõudlusliideseid veebisaidi jõudluse mõõtmiseks ja optimeerimiseks:

Näide 1: Lehe laadimisaja mõõtmine

            window.addEventListener("load", () => {
  const loadTime = performance.timing.loadEventEnd - performance.timing.navigationStart;
  console.log(`Page Load Time: ${loadTime} ms`);
});
            

              
                Copy
              
            
          

Näide 2: Aeglaselt laadivate ressursside tuvastamine

            const resourceTiming = performance.getEntriesByType("resource");

resourceTiming.forEach(resource => {
  if (resource.duration > 1000) {
    console.warn(`Slow Resource: ${resource.name}, Duration: ${resource.duration} ms`);
  }
});
            

              
                Copy
              
            
          

Näide 3: Interaktiivsuseni kuluva aja (TTI) mõõtmine - ligikaudne

Märkus: TTI on keeruline mõõdik ja see on lihtsustatud lähendus. Tõeline TTI nõuab keerukamat lähenemist.

            function getTimeToInteractive() {
  return new Promise(resolve => {
    if (document.readyState === 'complete') {
      resolve(performance.now());
    } else {
      window.addEventListener('load', () => {
        resolve(performance.now());
      });
    }
  });
}

getTimeToInteractive().then(tti => {
  console.log(`Approximate Time to Interactive: ${tti} ms`);
});
            

              
                Copy
              
            
          

Rakendatavad teadmised kasutajakogemuse optimeerimiseks

Kui olete veebi jõudlusliideste abil jõudlusandmeid kogunud, saate oma veebisaidi kasutajakogemuse optimeerimiseks kasutada järgmisi rakendatavaid teadmisi:

• Optimeerige pilte: Tihendage pilte, kasutage sobivaid pildivorminguid (nt WebP) ja kasutage reageerivaid pilte, et vähendada piltide laadimisaegu.
• Minifitseerige ja tihendage koodi: Minifitseerige ja tihendage HTML-, CSS- ja JavaScript-faile, et vähendada nende suurust ja parandada laadimisaegu.
• Kasutage brauseri vahemälu: Seadistage oma serveris sobivad vahemälu päised, et võimaldada staatiliste ressursside brauseripoolset vahemällu salvestamist.
• Kasutage sisuedastusvõrku (CDN): Jaotage oma veebisaidi sisu geograafiliselt mitme serveri vahel, et vähendada latentsust erinevates asukohtades asuvate kasutajate jaoks. Populaarsed CDN-pakkujad on Cloudflare, Akamai ja Amazon CloudFront.
• Optimeerige fontide laadimist: Kasutage font-display: swap, et vältida fontide blokeerimist ja parandada oma veebisaidi tajutavat laadimiskiirust.
• Vähendage HTTP-päringuid: Minimeerige HTTP-päringute arvu, kombineerides CSS- ja JavaScript-faile, lisades kriitilise CSS-i otse HTML-i (inlining) ja kasutades CSS-spraite.
• Lükake edasi mittekriitiliste ressursside laadimine: Lükake edasi mittekriitiliste ressursside, näiteks piltide ja JavaScript-failide laadimine pärast lehe esmast laadimist.
• Optimeerige serveri vastuseaegu: Veenduge, et teie server vastab päringutele kiiresti, optimeerides oma serveripoolset koodi ja andmebaasipäringuid.
• Jälgige jõudlust regulaarselt: Jälgige pidevalt oma veebisaidi jõudlust, kasutades veebi jõudlusliideseid ja muid jõudluse jälgimise tööriistu, et tuvastada ja lahendada jõudlusprobleeme. Väärtuslikku teavet pakuvad tööriistad nagu Google PageSpeed Insights, WebPageTest ja Lighthouse.

Tööriistad ja teegid jõudluse jälgimiseks

Mitmed tööriistad ja teegid aitavad teil veebisaidi jõudlust jälgida ja analüüsida, kasutades veebi jõudlusliideseid:

• Google PageSpeed Insights: Tasuta tööriist, mis analüüsib teie veebisaidi jõudlust ja annab soovitusi parendamiseks.
• WebPageTest: Tasuta tööriist, mis võimaldab teil testida oma veebisaidi jõudlust erinevatest asukohtadest ja brauseritest.
• Lighthouse: Avatud lähtekoodiga automatiseeritud tööriist veebilehtede kvaliteedi parandamiseks. See sisaldab auditeid jõudluse, juurdepääsetavuse, progressiivsete veebirakenduste, SEO ja muu kohta.
• New Relic: Põhjalik jõudluse jälgimise platvorm, mis pakub reaalajas teavet veebisaidi jõudluse kohta.
• Datadog: Jälgimis- ja analüütikaplatvorm, mis annab ülevaate kogu teie infrastruktuurist, sealhulgas veebisaidi jõudlusest.
• Sentry: Reaalajas vigade jälgimise ja jõudluse monitoorimise platvorm.
• Web Vitals Chrome Extension: Chrome'i laiendus, mis kuvab Core Web Vitals'i mõõdikuid reaalajas.

Kaalutlused globaalsele sihtrühmale

Veebisaidi jõudluse optimeerimisel globaalsele sihtrühmale on oluline arvestada järgmiste teguritega:

• Geograafiline asukoht: Kasutage CDN-i, et jaotada oma sisu geograafiliselt mitme serveri vahel, vähendades latentsust erinevates asukohtades asuvate kasutajate jaoks.
• Võrgutingimused: Optimeerige oma veebisait aeglaste või ebausaldusväärsete võrguühendustega kasutajate jaoks, kasutades tehnikaid nagu piltide tihendamine, koodi minifitseerimine ja brauseri vahemälu.
• Seadme võimekus: Optimeerige oma veebisait erinevatele seadmetele, sealhulgas mobiiltelefonidele, tahvelarvutitele ja lauaarvutitele, kasutades reageerivat disaini ja adaptiivseid laadimistehnikaid.
• Keel ja lokaliseerimine: Veenduge, et teie veebisait on lokaliseeritud erinevatele keeltele ja piirkondadele, sealhulgas sisu tõlkimine ja paigutuste kohandamine erinevate tekstisuundade jaoks.
• Juurdepääsetavus: Veenduge, et teie veebisait on puuetega kasutajatele juurdepääsetav, järgides juurdepääsetavuse juhiseid nagu WCAG.

Kokkuvõte

Veebi jõudlusliidesed pakuvad hindamatuid tööriistu veebisaidi jõudluse mõõtmiseks ja optimeerimiseks. Nende API-de mõistmise ja kasutamisega saavad arendajad tuvastada jõudluse kitsaskohti, parandada kasutajakogemust ja lõpuks edendada äriedu. Ärge unustage seada esikohale Core Web Vitals (LCP, CLS ja INP) kui veebisaidi üldise tervise ja kasutajate rahulolu võtmemõõdikuid. Oma veebisaidi jõudlust pidevalt jälgides ja optimeerides saate tagada kiire, reageeriva ja kaasahaarava kogemuse kasutajatele üle kogu maailma.